<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="./css/title-screen.css">
    <link rel="stylesheet" href="./css/choose.css">
    <link rel="stylesheet" href="./css/side.css">
    <link rel="stylesheet" href="./css/powerreview.css">
    <link rel="stylesheet" href="./css/map.css">

    <script src="./script/jqery.js"></script>
    <script src="./script/basic.js"></script>
    <script src="./script/chage.js"></script>
    <script src="./script/choose-power.js"></script>
    <script src="./script/neicema.js"></script>
    <script src="script/Map/map_show.js"></script>
    <script src="config/MapConfig.js"></script>
    <script src="./script/Game/HandlerGame.js"></script>

    <title>四神大陆先行版</title>
    <script src="bad_json/map-render.js"></script>
</head>

<script>
    $("body").ready(() => {
        show('title-screen');
    })


</script>
<style>
    .gamemain {
        height: 100vh;
        width: 60%;
        background-color: white;
        margin: auto;
    }

    body {
        background-color: black;
        overflow: hidden;
        height: 100vh;
        width: 100vw;
    }

    * {
        padding: 0px;
        margin: 0px;
        user-select: none;
    }

    .screen {
        display: none;
    }

    .screen-center {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        height: 100%;
    }

</style>
<script>
    function playmusic() {
        console.log('in')
        document.getElementById("bgm").play()
        document.getElementById("bgm").volume = 1
    }


</script>
<body onclick="playmusic()">
<audio autoplay="autoplay" id="bgm" style="position: fixed; top: 99999999px; left: 412412px" controls="controls"
       loop="loop" preload="auto" src="./music/intro.mp3"></audio>

<div class="screen gamemain">

</div>

div.side-
<div class="side-power"></div>
<div class="side-people">人物</div>
<div class="side-block" style="">
    <div class="side-left">

    </div>

    <div class="side-right">

    </div>
</div>

<div class="screen title-screen">
    <div class="title-big">魔幻的古大陆传奇先行版</div>
    <div class="title-big" style="font-size: 20px">请在1080P下游玩</div>
    <ref></ref>
    <br>
    <button class="title-screen-btn" onclick="show('choose');">开始游戏</button>
    <br>
    <button class="title-screen-btn" onclick="show('neicema')">内测码激活/更换</button>
    <br>
    <button class="title-screen-btn" onclick="show('gameinfo')">介绍</button>
    <br>
    <button class="title-screen-btn" onclick="show('test')">功能测试</button>

</div>


<div class="gamemapshow srceen">
    <div class="map-draw"></div>
</div>

<div class="test screen">
    <button onclick="StartGame()"> 游戏开始</button>
    <button> 简单对话</button>
</div>

<div class="screen neicema">
    <div class="screen-center neicema-center">
        <div>
            <p>内测码输入随机的字符串即可 我们将作为token使用</p>
            <input id='jihuo-code' type="text" style="width: 400px;height: 30px;font-size: 30px"> <br>
            <h2 onclick="neicema()">激活</h2>
        </div>
    </div>
</div>

<div class="screen gameinfo">
    <center>
        <br><br><br><br>
        <h1>制作员名单</h1>
        <br>
        <h2>游戏</h2>
        <p>策划： 刘博源</p>
        <p>数值： 刘博源</p>
        <p>文案： 刘博源</p>
        <p>程序： 刘博源</p>
        <p>世界观： 刘博源</p>
        <br>
        <h2>音乐: 《远方幽香》</h2>
        <p>作词： 刘博源</p>
        <p>编曲： 钻石广角音乐工作室</p>
        <p>作曲： 钻石广角音乐工作室</p>
        <br>
        <h2>音乐: 《background music demo 1》</h2>
        <p>编曲： 钻石广角音乐工作室</p>
        <p>作曲： 钻石广角音乐工作室</p>

        <br><br><br><br>
        该版本为玩法测试(demo)并不代表最终质量
        <p>内测码输入随机的字符串即可 我们将作为token使用</p>
        <p>
        <h2 style="color: skyblue; font-size: 40px" onclick="show('title-screen')">返回</h2></p>
    </center>
</div>

<div class="tips screen">
    <div class="screen-center tips-center">

    </div>
</div>

<div class="choose screen">
    <div class="main">
        <center><h1 style="padding-top: 40px">选择你的势力</h1></center>
        <div class="list">
            <div class="people-choose" onmouseover="easyshow(1)" onclick="choose_power(1)">
                <div class="info-power" id="info-power-1">
                    <div><p>青兰国 盘踞魔古大陆中上 是一个实力雄厚的强大君主制王朝 多年来 国安民和 </p> <br><br><br><br><br>
                        <p>国力: 58100</p>
                        <p>领主: 卷零 杰出大臣: 洛斯 陈时
                        </p></div>
                </div>
                <h2>青兰</h2> <br>君至青兰, 八荒闲转。云雾幽丽，林茂水暖
            </div>
            <div class="people-choose" onmouseover="easyshow(2)" onclick="choose_power(2)">
                <div class="info-power" id="info-power-2">
                    <div><p>野心与实力并存的国度 以残忍的战斗为使命 曾经的王族面对他的国民誓言 苍天之下黑土之上皆是裂谷塔的国土 </p> <br><br><br><br><br><br>
                        <p>国力: 31000</p>
                        <p>领主: 张希 杰出大臣： 沐昭 箫庄
                        </p></div>
                </div>
                <h2>裂谷塔</h2> <br>北至裂谷塔，巍巍重岩嶂。曜日除莽云，坤石妆群狼。
            </div>
            <div class="people-choose" onmouseover="easyshow(3)" onclick="choose_power(3)">
                <div class="info-power" id="info-power-3">
                    <div><p>极南是一个历史悠长的国邦 在神灵雪女庇佑下 此处国泰民安 </p> <br><br><br><br><br><br>
                        <p>国力: 72000</p>
                        <p>领主：雪女 杰出大臣：库玛 库瑞
                        </p></div>
                </div>
                <h2>极南</h2> <br>君至极南兮，飞雪似锦絮。千里尽银装，万里消兽禽。
            </div>
            <div class="people-choose" onmouseover="easyshow(4)" onclick="choose_power(4)">
                <div class="info-power" id="info-power-4">
                    <div><p>与其在他人账营下不如自己创建一方势力，这样面对如此世界的大变局，也有了一席之地</p> <br><br><br><br><br><br>
                        <p>国力: ？？？</p>
                        <p>会挤占:【太云】势力 领主: 你
                        </p></div>
                </div>
                <h2>自建角色</h2> <br>自建势力 <br>替代势力：太云
            </div>
        </div>
    </div>
    <div style="float: right;margin-right: 30px" onclick="next_choose()"><h1>下一步</h1></div>
    <div style="float: left;margin-left: 30px" onclick="show('powerreview')"><h1>势力查看</h1></div>
</div>


<div class="powerreview screen">
    <div class="power-show-init">&nbsp;</div>
    <div style="float: right;margin-right: 30px;color: skyblue;"><i><h1>红色的是首都，绿色的城市</h1></i></div>
    <div style="float: left;margin-left: 30px" onclick="show('choose')"><h1>返回</h1></div>

</div>

</body>

</html>